<template>  
  <div>  
    <h1 v-html="openotice.ntitle"></h1>
    <br>
    <div v-html="openotice.ncontent"  class="justified-text"></div>
    <el-button :type="isLiked ? 'primary' : 'default'" @click="toggleLike" style="float: center">
      {{ isLiked ? '已点赞' : '点赞' }}
      <i class="el-icon-star-on el-icon--right"></i>
    </el-button>
    <el-button>阅读量{{viewCount}}</el-button>
    <el-button>评论量{{commentCount}}</el-button>
    <el-form :model="opecomment" ref="opecomment" label-width="100px">  
    <el-form-item label="用户">  
      <div>jerry</div> 
    </el-form-item>  
    <el-form-item label="评论">  
      <el-input type="textarea" v-model="opecomment.commenttext" placeholder="请文明评论" style="width:60%"></el-input>  
    </el-form-item>  
    <el-form-item>  
      <el-button type="primary" @click="submitComment">提交</el-button>  
    </el-form-item>  
  </el-form>

  </div>  
</template>  
  
<script>  
export default {  

  data() {  
    return {  
      // 假设这是你的文章内容，包含HTML标签  
      openotice:{}, 
      isLiked: false,
      eid:"2",
      opecomment:{},
      commentCount:""
    }  
  },  

  mounted() {
    this.getContentByNid();
    this.fetchLikeStatus();
    this.getCommentCount();
  },

  methods:{
    //获得阅读量
    getCommentCount() {
      this.$axios
        .post( "comment/getCountByNid/"+this.$route.params.nid).then((resp) => {
          if(resp.data.code==200){
            this.commentCount= resp.data.data;
          }
        });
    },
    //用户评论
    submitComment(){
        this.$axios.post("/comment/addComment/"+this.$route.params.nid+"/"+this.eid,this.opecomment).then((resp) => {
          if (resp.data.code == 200) {
            this.$message({
                type: "success",
                message: "评论成功!",
              });
            //起到刷新页面的作用
            this.getContentByNid();
          } else {
            this.$message(JSON.stringify(resp.data.msg));
          }
        });
    },


    //获取该用户对该文章的点赞状态
    async fetchLikeStatus() {  
      try {  
        this.$axios.get("/like/"+this.$route.params.nid+"/"+this.eid).then((resp) => {
          if (resp.data.code == 200) {
            //起到刷新页面的作用
            this.isLiked=resp.data.data;
          } else {
            this.$message(JSON.stringify(resp.data.msg));
          }
        }); 
      } catch (error) {  
        console.error('点赞状态获取失败:', error);  
      }  
    },
    //执行点赞或取消点赞操作
    async toggleLike() {  
      if (this.isLiked) {    
        try {  
          await this.unLikePost();  
          this.isLiked = false;   
          console.log('取消点赞成功');  
        } catch (error) {  
          console.error('取消点赞失败:', error);   
        }  
      } else {  
        try {  
          await this.likePost();  
          this.isLiked = true;   
          console.log('点赞成功');  
        } catch (error) {  
          console.error('点赞失败:', error);  
        }  
      }  
    },  
    likePost() {  
        return this.$axios.post("/like/likeArticle/"+this.$route.params.nid+"/"+this.eid).then((resp) => {
          if (resp.data.code == 200) {
            this.$message({
                type: "success",
                message: "点赞成功!",
              });
            //起到刷新页面的作用
            this.getContentByNid();
          } else {
            this.$message(JSON.stringify(resp.data.msg));
          }
        });
    },  
    unLikePost() {   
      return this.$axios.post("/like/unlikeArticle/"+this.$route.params.nid+"/"+this.eid).then((resp) => {
          if (resp.data.code == 200) {
            this.$message({
                type: "success",
                message: "取消点赞成功!",
              });
            //起到刷新页面的作用
            this.getContentByNid();
          } else {
            this.$message(JSON.stringify(resp.data.msg));
          }
        });
    },


    //获取文章内容
    getContentByNid(){
        console.log("文章nid:"+this.$route.params.nid)
        this.$axios.post("notice/getContentByNid/"+this.$route.params.nid).then((resp) => {
        this.openotice.ntitle=resp.data.data.ntitle;
        this.openotice.ncontent=resp.data.data.ncontent;
        this.openotice.viewCount=resp.data.data.viewcount;
      });
    },
  }  
}  
</script>

<style>
.justified-text {
  text-align: justify;
  width: 80%;
  margin: 0 10%;
}

</style>